<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/style2.css">
  <title>js实现</title>
  <meta name="description" content="完美实现">
  <script src="http://srxboys.cn:8885/dist/index.js" id="rxcornor" link="https://gitee.com/cheere/screenscroll" target="_blank" title="Gitee" className="a b"></script>
</head>

<body>
  <div id="wrap">
    <div id="main">
      <div id="page1" class="page">1</div>
      <div id="page2" class="page">2</div>
      <div id="page3" class="page">3</div>
      <div id="page4" class="page">4</div>
    </div>
  </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>
  function addMouseWheelHandler() {
    // https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js
    //cheks for passive event support
    let g_supportsPassive = false;
    try {
      let opts = Object.defineProperty({}, 'passive', {
        get: function () {
          g_supportsPassive = true;
        }
      });
      window.addEventListener("testPassive", null, opts);
      window.removeEventListener("testPassive", null, opts);
    } catch (e) {}

    let prefix = '';
    let _addEventListener;

    if (window.addEventListener) {
      _addEventListener = "addEventListener";
    } else {
      _addEventListener = "attachEvent";
      prefix = 'on';
    }

    // detect available wheel event
    let support = 'onwheel' in document.createElement('div') ? 'wheel' : // Modern browsers support "wheel"
      document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least "mousewheel"
      'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
    let passiveEvent = g_supportsPassive ? {
      passive: false
    } : false;

    if (support == 'DOMMouseScroll') {
      document[_addEventListener](prefix + 'MozMousePixelScroll', MouseWheelHandler, passiveEvent);
    }

    //handle MozMousePixelScroll in older Firefox
    else {
      document[_addEventListener](prefix + support, MouseWheelHandler, passiveEvent);
    }
  }

  //for IE 9 ?
  function preventDefault(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
</script>

<script type="text/javascript">
  let wrap = document.getElementById("wrap");
  let main = document.getElementById("main");
  let hei = document.body.clientHeight;
  wrap.style.height = hei + "px";
  let obj = document.getElementsByTagName("div");
  for (let i = 0; i < obj.length; i++) {
    if (obj[i].className == 'page') {
      obj[i].style.height = hei + "px";
    }
  }

  //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
  let startTime = 0, //翻屏起始时间
    endTime = 0,
    now = 0;

  // 事件监听
  addMouseWheelHandler()

  //滚动事件处理函数
  function MouseWheelHandler(event) {
    startTime = new Date().getTime();
    const offsetTop = parseInt(main.offsetTop)
    const delta = event.detail || (-event.wheelDelta) || -event.deltaY;
    console.log('滚动 滚动 delta=', delta, ' main.offsetTop=', offsetTop)
    //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
    //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
    if ((endTime - startTime) < -1000 && offsetTop <= 0) {
      if (delta > 0 ) {
        //向上滚动 第一个
        now = 0;
      }

      if (delta < 0) {
        if (offsetTop == 0 || offsetTop > -(hei * 3)) {
          //向下滚动
          now = now - hei;
        }
      }

      console.log('结果 now=', now)
      toPage(now);

      endTime = new Date().getTime();
    } else {
      preventDefault(event)
    }
  }

  function toPage(now) {
    $("#main").animate({
      top: (now + 'px')
    }, 1000); //jquery实现动画效果
    //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果
  }
</script>

</html>